<template>
  <div class="details banxin">
    <!-- 面包屑 -->

    <div class="content tanxin">
      <main class="tanxin">
        <div class="main_l">
          <div class="bigImg">
            <img
              width="100%"
              height="460"
              :src="'https://sc.wolfcode.cn' + productInfo.coverImg"
              alt=""
            />
          </div>
          <ul class="smallImg tanxin">
            <li
              @click="sClick(index, item.src)"
              :class="productActive === index ? 'active' : ''"
              v-for="(item, index) in productInfo.imgAltas"
              :key="index"
            >
              <img
                width="100%"
                :src="'https://sc.wolfcode.cn' + item.src"
                alt=""
              />
            </li>
          </ul>
        </div>
        <div class="main_r">
          <h2>{{ productInfo.seriesTitle }}</h2>
          <p>
            {{ productInfo.seriesSubTitle }}
          </p>
          <section>{{ productInfo.coin }}积分</section>
          <div v-for="(item, index) in productInfo.parameterJson" :key="index">
            <h3>{{ item.title }}</h3>
            <ul>
              <!-- <li
                v-for="(items, index) in item.parameters"
                :key="items.id"
                :class="parametersActive == index ? 'active' : ''"
                @click="handClick(index)"
              >
                {{ items.title }}
              </li> -->
               <li
                v-for="(items,indexs) in item.parameters"
                :key="indexs"
                :class="{ active: items.currentActivate }"
                @click="$router.push(`/details/${items.id}`)"
              >
                {{ items.title }}
              </li>
            </ul>
          </div>

          <h3>数量</h3>
          <div class="stepper tanxin">
            <div class="btn jia" @click="add">+</div>
            <input type="text" value="num" disabled v-model="num" />
            <div class="btn jian" @click="sub">-</div>
          </div>
          <div class="btns">
            <div @click="addcart">加入购物车</div>
            <div class="buynow">立即购买</div>
          </div>
        </div>
      </main>
      
    </div>
  </div>
</template>

<script>
import { GoodsDetailsApi, AddCartApi } from "@/request/api";
export default {
  data() {
    return {
      // 小图的当前项
      productActive: 0,
      parametersActive: 0,
      num: 1,
      // 产品信息
      productInfo: {
        coverImg: "",
      },
      
    };
  },
  watch:{
       "$route.params.id":{
         handler(newVal,oldVal){
           console.log(newVal,oldVal);
           if(newVal != oldVal){
             this.$router.go(0)
           }
         }
       }
  },
  methods: {
    //   点击小图 大图跟着变
    sClick(index, src) {
      //    console.log(index,src);
      this.productActive = index;
      this.productInfo.coverImg = src;
    },
    // handClick(index) {
    //   this.parametersActive = index;
    // },
    add() {
      if (this.num >= 1) {
        this.num++;
      }
    },
    sub() {
      if (this.num > 1) {
        this.num--;
      }
    },
    addcart() {
     
      let token = localStorage.getItem("x-auth-token");
     
    
      if (token) {
        AddCartApi({
         productId:this.$route.params.id,
         total:this.num,
         modified:1
         
        }).then((res) => {
          console.log(res);
          res.data.data.num=this.num
         this.$store.state.info=res.data.data
     
         console.log(this.$store.state.info);
         let obj={content:'加入购物车',icon:'success'}
         this.$store.dispatch('AsyncToast',obj)
        });
      }else{
          let obj={
              content:'请先登录',
              icon:'danger'
          }
          this.$store.dispatch('AsyncToast',obj)
      }
    },
   
  },
  created() {
    // console.log(this.$route.params.id);
    let myid = this.$route.params;
    GoodsDetailsApi(myid).then((res) => {
      if (res.data.code === 0) {
        let { productInfo } = res.data.data;
        this.productInfo = productInfo;
        this.productInfo.coverImg = productInfo.imgAltas[0].src;
        console.log(this.productInfo);
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.content {
  min-height: 560px;
  main {
    width: 970px;
    /* background: pink; */
    border-right: 3px solid #ccc;
    box-sizing: border-box;
    padding-right: 49px;
    .main_l {
      width: 459px;
      margin-right: 32px;
      .bigImg {
        width: 459px;
        height: 460px;
        margin-bottom: 21px;
        img {
          display: block;
        }
      }
      .smallImg {
        width: 459px;
        li {
          width: 100px;
          height: 100px;
          opacity: 0.6;
          box-sizing: border-box;
          &.active {
            opacity: 1;
            border: 2px solid red;
          }
        }
      }
    }
    .main_r {
      flex: 1;
      /* background: tan; */
      h2 {
        font-size: 28px;
        color: #000000;
      }
      p {
        margin-top: 15px;
        font-size: 14px;
        color: #999999;
        line-height: 1.2;
        margin-bottom: 26px;
      }
      section {
        font-size: 28px;
        font-weight: bold;
        color: #fd604d;
        padding-bottom: 23px;
        border-bottom: 1px solid #ccc;
      }
      h3 {
        margin-top: 19px;
        margin-bottom: 14px;
        font-size: 16px;
        color: #000000;
        font-weight: bold;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          height: 32px;
          border: 1px solid #d1d1d1;
          color: #666666;
          line-height: 32px;
          padding: 0 17px;
          cursor: pointer;
          margin-right: 20px;
          margin-bottom: 11px;
          &.active {
            color: @blue;
            border-color: @blue;
          }
        }
      }
      .stepper {
        background: #fff;
        width: 105px;
        .btn {
          width: 30px;
          height: 32px;
          border: 1px solid #d1d1d1;
          text-align: center;
          box-sizing: border-box;
          line-height: 32px;
          color: #ccc;
          cursor: pointer;
        }
        input {
          width: 45px;
          border: 0;
          box-sizing: border-box;
          text-align: center;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
        }
      }
      .btns {
        display: flex;
        margin-top: 24px;
        div {
          width: 150px;
          height: 46px;
          background: #3dc36b;
          font-size: 18px;
          color: #ffffff;
          line-height: 46px;
          text-align: center;
          cursor: pointer;
          margin-right: 19px;
          &.buynow {
            background: @orange;
          }
        }
      }
    }
  }
}

</style>